<script setup>
import { ref, computed } from "vue";
import { Edit, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { makePostService } from "@/api/postManage.js";
import { useTokenStore } from '@/stores/token';

const tokenStore = useTokenStore();

//帖子类型数据模型
const categorys = [
  { id: 1, name: "表白墙" },
  { id: 2, name: "跳蚤市场" },
  { id: 3, name: "招募" },
  // { id: 4, name: "找搭子" },
];
// 发帖子数据模型
const articleModel = ref({
  title: "",
  categoryId: "",
  image: "",
  content: "",
  price: "0",        // 如果帖子类型为“跳蚤市场”，则需要填写
  requirement: "无", // 如果帖子类型为“招募”，则需要填写
  approvalStatus: 1,
});
// 根据帖子类型动态显示或隐藏不同的输入项
const showPriceInput = computed(() => {
  return articleModel.value.categoryId === 2;
});
const showRequirementsInput = computed(() => {
  return articleModel.value.categoryId === 3;
});

//回显上传的图片
const uploadSuccess = (result) => {
  articleModel.value.image = result.data;
};

//发布帖子，待管理员审核
const publishArticle = async () => {
  console.log(articleModel.value);
  let result = await makePostService(articleModel);
  ElMessage.success(result.msg ? result.msg : "帖子发布成功，待管理员审核");
};
// 清空表单
const clearForm = () => {
  articleModel.value = {
    title: "",
    categoryId: "",
    image: "",
    content: "",
    price: "0",
    requirement: "无",
  };
};
</script>

<!-- ================================================================================================== -->
<!-- **************************************************************************************************** -->
<!-- ================================================================================================== -->

<template>
  <el-card class="box-card">
    <div>
      <!-- 添加帖子表单 -->
      <el-form
        :model="articleModel"
        theme="snow"
        label-width="100px"
        contentType="html"
      >
        <el-form-item label="帖子标题">
          <el-input
            v-model="articleModel.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="帖子分类">
          <el-select placeholder="请选择" v-model="articleModel.categoryId">
            <el-option
              v-for="c in categorys"
              :key="c.id"
              :label="c.name"
              :value="c.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="帖子封面">
          <el-upload
            class="avatar-uploader"
            :auto-upload="true"
            :show-file-list="false"
            action="/api/upload"
            name="image"
            :headers="{ Authorization: tokenStore.token }"
            :on-success="uploadSuccess"
          >
            <img
              v-if="articleModel.image"
              :src="articleModel.image"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章内容">
          <div class="editor">
            <quill-editor
              theme="snow"
              v-model:content="articleModel.content"
              contentType="html"
            >
            </quill-editor>
          </div>
        </el-form-item>
        <!-- 根据帖子类型显示不同的输入项 -->
        <el-form-item v-if="showPriceInput" label="价格要求">
          <el-input v-model="articleModel.price" placeholder="请输入价格要求" />
        </el-form-item>
        <el-form-item v-if="showRequirementsInput" label="招募要求">
          <el-input
            v-model="articleModel.requirement"
            placeholder="请输入招募要求"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="publishArticle">发布</el-button>
          <el-button type="info" @click="clearForm">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<!-- ================================================================================================== -->
<!-- **************************************************************************************************** -->
<!-- ================================================================================================== -->

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>